<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .search {
            width: 400px;
            margin: 100px auto;
            position: relative;
        }
        .sr{
            float:left;
            width: 300px;
            height: 30px;
        }
        .btn {
            float:right;
            width: 100px;
            height: 30px;
        }
        .search ul{
            width: 300px;
            position: absolute;
            left: 0;
            top: 30px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="search">
        <form action="">
            <input type="search" class='sr'>
            <button class='btn'>搜索</button>
        </form>
        <ul>
        </ul>
    </div>
</body>
<script>
    ;(function(){
        var keywords = [ "广东人", "广东人爱吃", "广东人爱吃福建人","王宝强","王宝强的经纪人","王宝强的老婆","林丹出轨门","林丹夺冠","123","1234","2341","林丹的生平","JavaScript","Java","王思聪","王健林","社会王","隔壁老王"];
        //获取元素
        var sr = document.querySelector('.sr')
        var ul = document.querySelector('.search ul')

        //注册事件
        sr.onkeyup = function(){
            ul.innerHTML = '';
            if(sr.value == '') {
                ul.innerHTML = '';
                return;
            }
            for(var i = 0 ; i < keywords.length; i++){
                if(keywords[i].indexOf(sr.value) != -1){
                    var li = document.createElement('li');
                    ul.appendChild(li);
                    li.innerText = keywords[i]
                    li.onmouseenter = liMouseenter
                    li.onmouseleave = liMouseleave
                    li.onclick = liClick
                }
            }
        }
        function liMouseenter(){
            this.style.backgroundColor = 'red';
        }
        function liMouseleave(){
            this.style.backgroundColor = '';
        }
        function liClick(){
            sr.value = this.innerText;
            ul.innerHTML = ''
        }
    }())
</script>
<script src='../jquery-1.12.4.js'></script>
<script>
    // $(function(){
    //     var keywords = [ "广东人", "广东人爱吃", "广东人爱吃福建人","王宝强","王宝强的经纪人","王宝强的老婆","林丹出轨门","林丹夺冠","123","1234","2341","林丹的生平","JavaScript","Java","王思聪","王健林","社会王","隔壁老王"];
    //     $('.sr').on('keyup',function(e){
    //         //清除之前搜索的
    //         $('.search ul').html('')
    //         if(!$('.sr').val()){
    //             $('.search ul').html('')
    //             return;
    //         }
    //         //当键盘弹起时,搜索单词库,如果有符合的,生成li列表
    //         for(var i = 0; i < keywords.length; i++) {
    //             if(keywords[i].indexOf($('.sr').val()) != -1) {
    //                 $('<li>'+keywords[i]+'</li>').appendTo($('.search ul'))
    //             }
    //         }
    //     })
    //     $('.search ul').on({
    //         'mouseenter':function(){
    //             $(this).css('backgroundColor','red').siblings().css('backgroundColor','')
    //         },
    //         'click': function(){
    //             $('.sr').val($(this).text())
    //             $('.search ul').html('')
    //         }
    //     },'li')
    // })
</script>
</html>